body {
  background-color: #fff;
}
header {
  z-index: 100;
}
main {
  background-color: transparent;
}

button {
  filter: invert(1); /* Filter on small screen */

  border-width: 3px;
  border-style: solid;

  font-weight: 500;
  font-family: 'Montserrat Alternates', sans-serif !important;
  height: 10%;
  background-color: transparent;
  border-color: #000;
  animation-duration: .5s;
  transition: background-color .5s, color .5s;
  pointer-events: fill !important;
}

button:hover {
  animation-name: color_switch;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  background-color: #000;
  transition-delay: .5s !important;
  color: #fff;
}

@keyframes color_switch {
  0%   { border-color: #000; }
  15%  { border-color: rgba(190, 190, 190, 0.8); }
  30%  { border-color: #000; }
  45%  { border-color: rgba(190, 190, 190, 0.8); }
  60%  { border-color: #000; }
  75%  { border-color: rgba(190, 190, 190, 0.8); }
  90%  { border-color: #000; }
}

article h1 span {
  font-weight: 300;
  font-size: 1.5rem;
}
article h1 .alternate {
  font-weight: 700 !important;
}
article h2 {
  font-size: 1.5rem !important;
  font-weight: 800;
}
article h3 {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
}

hr {
  height: 2.6px;
}

p.more {
  font-size: 0.6rem;
}
p.more button {
  font-size: 1.25rem !important;
  height: 45px;
  width: 180px;
  filter: invert(0);
}

.side-icon {
  background-size: cover !important;
  background-position: 10px 30%;
  transform: translateY(100px);
  
  height: 25vh !important;
  width: 21vh !important;
}
#moon_2 .side-icon {
  background: url('/resource/img/logos/os.png') no-repeat;
  margin-left: 13vh !important;
}
#to .side-icon {
  background: url('/resource/img/logos/to.png') no-repeat;
  height: 28vh !important;
  margin-left: 13vh !important;
}
#transaction .side-icon {
  background: url('/resource/img/logos/bbgs_transparent.png') no-repeat;
  height: 28vh !important;
  width: 30vh !important;
  margin-left: 9vh !important;
}
#perimeter .side-icon {
  background: url('/resource/img/logos/bbgs_perimeter.png') no-repeat;
  width: 30vh !important;
  height: 30vh !important;
  margin-left: 9vh !important;
}


#moon_1 {
  background-position: bottom !important;
  background-position: top right;
  background: url("/resource/img/expertise/moon_header_bg.png") no-repeat;
  background-size: cover !important;
}
#moon_1_text {
  opacity: 1;
  max-width: 1200px;
  z-index: 100;
}
#moon_1_text span {
  opacity: 0;
}

#moon_2 {
  background-position: top !important;
  background: url("/resource/img/expertise/moon_header_2_bg.png") no-repeat;
  background-size: cover !important;
}
#moon_2_text {
  margin-right: 5%;
  font-weight: 800;
}
#moon_2_text h3 span {
  font-size: 1.3rem;
}

#to {
  background-image: url("/resource/img/expertise/container_responsive.png");
  background-position: left;
  background-size: cover;
}
#to_text, #transaction_text, #perimeter_text {
  /* color: #fff; */
  transform: none !important;
}

#transaction {
  background-image: url("/resource/img/expertise/water.png");
  background-position: left;
  background-size: cover;
  background-repeat: repeat-y;
}

#team {
  background-image: url("/resource/img/expertise/team_responsive.png");
  background-position: left;
  background-size: cover;
}
#team_text {
  transform: none;
}

#team_text h2 {
  font-size: 1.85rem;
}
#team_text h2 span.text-green {
  font-weight: 700;
}

#perimeter {
  background-image: url("/resource/img/expertise/perimeter.png");
  background-position: left;
  background-size: cover;
  background-repeat: repeat-y;
}
lottie-player {
  max-height: 90vh;
  height: auto;
}
#logo_lottie {
  height: 30vh !important;
}

/* IMAGES WIDTH */
@media screen and (min-width: 532px), 
       screen and (max-height: 700px) {

}

/* SM */
@media (min-width: 576px) {
  article div.desc {
    padding-left: 50vh;
  }
  button {
    filter: invert(0) !important;
  }
  .text-sm-black {
    color: rgba(var(--bs-black-rgb),var(--bs-text-opacity))!important;
  }
  section {
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  article h1 span {
    font-size: 1.85rem;
  }
  article h2 {
    font-size: 1.85rem !important;
  }
  article h3 {
    font-size: 0.9rem !important;
  }

  .more {
    font-size: 1.5rem !important;
    font-weight: 200 !important;
  }
  p.more {
    margin-left: 50vh !important;
  }
  p.more button {
    width: auto !important;
    height: auto !important;
  }

  #to {
    background-image: url("/resource/img/expertise/container.png");
  }
  #to_text, #transaction_text, #perimeter_text {
    color: #000 !important;
  }
  #team {
    background-image: url("/resource/img/expertise/team.png");
  }
  #team_text {
    font-size: 2.8rem !important;
  }
}
/* MD */
@media (min-width: 768px) {
  article h1 span {
    font-size: 2.1rem;
  }
  article h2 {
    font-size: 2.5rem !important;
  }
  article h3 {
    font-size: 1.5rem !important;
  }

  #moon_2_text {
    max-width: 800px !important;
  }
  #to_text .desc *, #transaction_text .desc * {
    max-width: 1250px !important;
  }
  lottie-player {
    max-height: 50vh;
    height: auto;
  }
}
/* LG */
@media (min-width: 992px) {
  p.more {
    margin-left: 0 !important;
  }
  article h1 span {
    font-size: 2.5rem;
  }
  article h2 {
    font-size: 2.9rem !important;
  }
  article h3 {
    font-size: 1.85rem !important;
  }
  #moon_2_text {
    max-width: 1100px !important;
  }
  #moon_2_text h2 {
    font-size: 2.9rem !important;
  }
  #moon_2_text h3 span {
    font-size: 2.2rem !important;
  }
  #to_text .desc *, #transaction_text .desc * {
    max-width: 1000px;
  }
  lottie-player {
    max-height: 70vh;
    height: auto;
  }
}
/* XXL */
@media (min-width: 1400px) {
  article h1 span {
    font-size: 2.9rem;
  }
  article h2 {
    font-size: 5rem !important;
  }
  article h3 {
    font-size: 2.5rem !important;
  }
  #moon_2_text h2 {
    font-size: 4.31rem !important;
  }
  #moon_2_text h3 span {
    font-size: 3rem !important;
  }
  #to_text:first-child, #transaction_text:first-child {
    width: 1025px;
  }
}


@media (min-width: 992px) and (max-width: 1096px) {
  #nav_dl {
    position: absolute !important;
    top: 50px !important;
    width: 200% !important;
    right: 0 !important;
  }
}